import { defineComponent, ref, computed, watch, onMounted, getCurrentInstance } from "vue"
import { inject } from "vue"
import { provide } from "vue"

import HeaderTr from "./header-tr"
import { EMIT_EVENTS } from "../util/constant"
import { useEmitter } from "amtf/hooks"
import emitter from "amtf/utils/emitter"
import { use样式 } from "amtf/hooks"
import { getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-header"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        columnsOptionResetTime: {
            type: Number,
            default: 0,
        },
        groupColumns: {
            type: Array,
            required: true,
        },
        colgroups: {
            type: Array,
            required: true,
        },
        fixedHeader: {
            type: Boolean,
            required: true,
        },
        isGroupHeader: {
            type: Boolean,
            required: true,
        },
        cellSelectionData: {
            type: Object,
            default: () => null,
        },
        // cell selection range data
        cellSelectionRangeData: {
            type: Object,
            default: () => null,
        },
        headerIndicatorColKeys: {
            type: Object,
            default: () => null,
        },
        headerRows: {
            type: Array,
            default: () => [],
        },
        // checkbox option
        checkboxOption: {
            type: Object,
            default: () => null,
        },
        // sort option
        sortOption: {
            type: Object,
            default: () => null,
        },
        // cell style option
        cellStyleOption: {
            type: Object,
            default: () => null,
        },
        // event custom option
        eventCustomOption: {
            type: Object,
            default: () => null,
        },
    },
    setup(props) {
        const instance = getCurrentInstance()
        const 表头id = instance.uid
        provide("表头id", 表头id)
        const { broadcast } = useEmitter(表头id)
        const { dispatch } = useEmitter(inject("表格id"))
        const { 拼样式名_table直属 } = use样式(主名)

        const state = ref({
            // 对应原来的sortColumns
            sortColumns: {},
        })

        // 计算属性：headerClass
        const headerClass = computed(() => ({
            [拼样式名_table直属("fixed-header")]: props.fixedHeader,
        }))

        // 监听colgroups变化
        watch(
            () => props.colgroups,
            () => {
                initSortColumns()
            }
        )

        // 方法：sortChange
        const sortChange = ({ currentField, sortResult }) => {
            const { multipleSort, sortChange: sortChangeFn } = props.sortOption

            state.value.sortColumns[currentField] = sortResult

            if (!multipleSort) {
                for (const field in state.value.sortColumns) {
                    if (field !== currentField) {
                        state.value.sortColumns[field] = ""
                    }
                }
            }

            dispatch(EMIT_EVENTS.SORT_CHANGE, state.value.sortColumns)

            if (sortChangeFn) {
                sortChangeFn(state.value.sortColumns)
            }
        }

        // 方法：initSortColumns
        const initSortColumns = () => {
            let sortColumns = {}
            props.colgroups.forEach(item => {
                if (typeof item.sortBy === "string") {
                    sortColumns[item.field] = item.sortBy
                }
            })
            state.value.sortColumns = sortColumns
        }

        // 在组件挂载时监听事件
        onMounted(() => {
            emitter.on(EMIT_EVENTS.SORT_CHANGE, params => {
                sortChange(params)
            })
        })

        return () => (
            <thead class={headerClass.value}>
                {props.groupColumns.map((groupColumn, rowIndex) => {
                    return (
                        <HeaderTr
                            key={rowIndex}
                            columnsOptionResetTime={props.columnsOptionResetTime}
                            groupColumn={groupColumn}
                            headerRows={props.headerRows}
                            colgroups={props.colgroups}
                            fixedHeader={props.fixedHeader}
                            isGroupHeader={props.isGroupHeader}
                            rowIndex={rowIndex}
                            checkboxOption={props.checkboxOption}
                            sortOption={props.sortOption}
                            sortColumns={state.value.sortColumns}
                            cellStyleOption={props.cellStyleOption}
                            cellSelectionData={props.cellSelectionData}
                            cellSelectionRangeData={props.cellSelectionRangeData}
                            headerIndicatorColKeys={props.headerIndicatorColKeys}
                        />
                    )
                })}
            </thead>
        )
    },
})
